<template>
  <div>
    <van-overlay
      :show="show"
      style="z-index:99"
    >
      <div class="wrapper">
        <van-swipe
          lazy-render
          :loop="true"
          :stop-propagation='false'
          class="my-swipe"
          :initial-swipe='initIndex'
          @change='changeSwipe($event)'
        >
          <van-swipe-item
            v-for="tag in videos"
            :key="tag"
          >
            <!-- <van-swipe-item
          v-for="tag in videos"
          :key="tag"
          @touchstart="touchstart()"
          @touchmove="closeSwipe"
        > -->
            <div class="img-body" @click="colseOverlay($event)" v-if="tag.type == 'img'">
              <img
                class="img"
                :src="tag.url"
              />
            </div>
            <div class="video-body" v-if="tag.type != 'img'">
              <video
                class="myVideo"
                id='myVideo'
                controls='true'
                :src="tag.url"
                preload="auto"
              >
              </video>
              <div class="video-overlay" @click="colseOverlay($event)"></div>
            </div>
          </van-swipe-item>
          <template #indicator="{ active }">
            <div class="custom-indicator">{{ active + 1 }}/4</div>
          </template>
        </van-swipe>
      </div>
    </van-overlay>
    <!-- <div class="task-submit-picture">
      <div class="task-submit-picture-item" v-for="(img,index) in imgData" :key="index">
        <img :src="baseUrl + img.resourceUrl" v-if="img.resourceUrl.split('.')[img.resourceUrl.split('.').length-1] != 'mp4'" @click="onSelImg('img',index)" />
        <video :src="baseUrl + img.resourceUrl" v-if="img.resourceUrl.split('.')[img.resourceUrl.split('.').length-1] == 'mp4'" @click="onSelImg('video',index)" />
      </div>
    </div> -->
    <div class="task-submit">
      <div
        class="task-submit-picture"
        v-if="imgData"
      >
        <div
          class="task-submit-picture-item"
          v-for="(img,index) in imgData "
          :key="img"
          :style="{'background-image': 'url('  + img.resourceUrl + ')'}"
          @click="onSelImg('img', index)"
        >
          <!-- <img
            :src="baseUrl + img.resourceUrl"
            v-if="img.resourceUrl.split('.')[1] != 'mp4'"
            @click="onSelImg('img', index)"
          /> -->
          <video
            :src="baseUrl + img.resourceUrl"
            alt=""
            v-if="img.resourceUrl && img.resourceUrl.split('.')[img.resourceUrl.split('.').length-1] == 'mp4'"
            @click="onSelImg('video', index)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 圖片展示组件
 * 传入数据 data
 * {
        imgData: {
          id	number

          taskId	number	任务id	

          resourceUrl	string	任务资源url	

          addadmin	string 添加人	

          addTime	string	添加时间
        }
    }
 */
import {
  Button,
  Image as VanImage,
  grid,
  gridItem,
  Overlay,
  ImagePreview,
  Swipe,
  SwipeItem
} from "vant";
export default {
  name: "MyImgs",
  props: {
    imgData: []
  },
  components: {
    [Button.name]: Button,
    [VanImage.name]: VanImage,
    [grid.name]: grid,
    [gridItem.name]: gridItem,
    [Overlay.name]: Overlay,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Overlay.name]: Overlay,
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      myVideo:null,
      initIndex: 0,
      themeVars: {
        vanGridItemContentBackgroundColor: "none"
      },
      startY: 0,
      startX: 0,
      videos: [],
      images: [],
      showImagePreview: false,
      isVideo: false,
      show: false,
      // baseUrl: "http://pic.05zhe.com/" //开发环境
      baseUrl: "" //发布环境
    };
  },

  mounted() {
    this.myVideo = document.getElementById("myVideo"); //对应video标签的ID
  },
  methods: {
    playVideo(e){
      console.log(e);
      const video = e.target.previousSibling;
      video.play();
    },
    touchstart() {
      event.preventDefault(); //阻止默认事件（长按的时候出现复制）
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    /**上滑关闭视频 */
    closeSwipe(event) {
      // console.log("移动了", event.changedTouches[0].pageY);
      var moveEndX = event.changedTouches[0].pageX;
      var moveEndY = event.changedTouches[0].pageY;
      var X = moveEndX - this.startX;
      var Y = moveEndY - this.startY;
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        console.log("left 2 right");
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        console.log("right 2 left");
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        console.log("top 2 bottom");
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        console.log("bottom 2 top");
        this.myVideo.pause();
        this.show = false;
      } else {
        console.log("just touch");
      }

      // this.show = false;
    },
    // onSelImg(type,index) {
    //   this.videos = [];
    //   if (type == "img") {
    //     let imgUrl = [];
    //     for (let i = 0; i < this.imgData.length; i++) {
    //       const url = this.baseUrl + this.imgData[i].resourceUrl;
    //       imgUrl.push(url);
    //     }
    //     ImagePreview({ images: imgUrl ,startPosition:index});
    //   } else {
    //     for (let i = 0; i < this.imgData.length; i++) {
    //       const url = this.baseUrl + this.imgData[i].resourceUrl;
    //       this.videos.push(url);
    //     }
    //     this.show = true;
    //   }
    // }
    onSelImg(type, index) {
      this.videos = [];
      this.initIndex = index;
      this.myVideo = this.myVideo ? this.myVideo :document.getElementById("myVideo");
      // this.changeSwipe(index);
      for (let i = 0; i < this.imgData.length; i++) {
        const tag = this.imgData[i];
        type =
          tag && tag.resourceUrl.split(".")[tag.resourceUrl.split(".").length - 1] ==
          "mp4"
            ? "video"
            : "img";
        const url = this.baseUrl + tag.resourceUrl;
        this.videos.push({ url: url, startPosition: index, type: type });
      }
      this.show = true;
    },
    // swipe翻頁后
    changeSwipe(e) {
      let tag = this.imgData[e];
      this.myVideo = this.myVideo ? this.myVideo :document.getElementById("myVideo");
      let isVideo =
        tag && tag.resourceUrl.split(".")[tag.resourceUrl.split(".").length - 1] ==
        "mp4"
          ? true
          : false;
      if (isVideo) {
        if (this.myVideo.paused){
           this.myVideo.play();
       }else{
           this.myVideo.pause();
       }
      }else{
        // this.myVideo.pause();
      }
    },
    colseOverlay(e){
      console.log('eeeeee:',e.target.className)
      // if('wrapper' == e.target.className){
        console.log('this.myVideo:',this.myVideo)
        this.myVideo?this.myVideo.pause():null;
        this.show=false;
      // }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.my-swipe{
  .van-swipe__track{
    display: flex;
    justify-content: stretch;
  }
}
</style>
<style scoped lang="less" >
.task-submit-picture {
  // margin: 0 30px;
  display: flex;
  flex-wrap: wrap;
  &-item {
    // width: 160px;
    // height: 160px;
    // margin-right: 16px;
    // background: #eee;
    // position: relative;
    // margin-bottom: 16px;
    
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform:scale(1.4);
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%;
    }
     width: 160px;
    height: 160px;
    margin-right: 16px;
    margin-bottom: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  .my-swipe {
    width: 100%;
    height: 100%;
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
    .van-swipe-item {
      font-size: 50px;
      color: #fff;
      .img-body {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .video-body{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        .video-overlay{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 9;
        }
        video {
          width: 100%;
        }
      }
    }
  }
}
</style>
